<template>
  <div class="wrap">
    <div class="w100 haed bbg">
        <img class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="@/assets/img/back.png" @click="back">
        <p class="fz37 cfff hpd tc">已完成订单</p>
    </div>
    <div class="p20 main">
        <el-card class="box-card p20">
        <div>
            <p>
                <span class="f35 fb">订单信息</span>
                <span class="finish">已完成</span>
            </p>
            <p class="line"></p>
            <p>
                订单号：<span>{{detail.orderCode}}</span>
            </p>
            <p class="center">
                服务项目：<span>{{detail.serviceItem}}</span>
                <img src="@/assets/img/maintain/plane.png" class="map">
            </p>
            <p>下单时间：<span>{{detail.createdDate | formatDate}}</span></p>
            <p>预约时间：<span>{{detail.bookingTime | formatDate}}</span></p>
            <p>车辆：<span>奔驰</span></p>
            <p>备注：<span>{{detail.note}}</span></p>
        </div>
        <div class="mt50 detail">
            <h3>订单详情</h3>
            <div class="line mt20 mb15"></div>
            <p>
                <span>车辆精洗</span>
                <span>{{detail.wash | add0}}</span>
            </p>
            <p>
                <span>车辆附加费用</span>
                <span>0</span>
            </p>
           <p class="line"></p>
            <p>
                <span>原价</span>
                <span>¥{{detail.originPrice}}</span>
            </p>
            <p>
                <span>店家优惠</span>
                <span style="color:#ce6a47">{{detail.discount | getDiscount}}</span>      
            </p>    
            <p class="line"></p>
            <p>
                <span>优惠券</span>
                <span style="color:#ce6a47">0</span>      
            </p>    
            <div class="line"></div>
            <p>
                <span>支付金额</span>
                <span class="fb f30">¥{{detail.currentPrice}}</span>      
            </p>  
        </div>
      
    </el-card>
    
    <el-card class="box-card pd">
        <h3>评价结果</h3>
        <p class="line"></p>
        <p>评价时间：<span>{{item.createdDate | formatDate}}</span></p>
        <p>
            <span>评价结果：</span>
            <span style="display:inline-block;">        
                <svg class="icon star"  aria-hidden="true" v-for="s in 5" :key="s" :class="s<=item.star?'active':''">
                    <use xlink:href="#icon-star"></use>
                </svg>               
            </span>
        </p>
        <p>
            <span>评语：</span>
            <span>{{item.commentContent}}</span>
        </p>
    </el-card>
    </div>
    
    
  </div>
</template>

<script>
import '../../assets/js/iconfont'
import myFilter from  "../../assets/js/mixin";
import { orderDetail } from "@/api/index";

export default {
    mixins:[myFilter],
    data(){
        return{
            score:3 ,
            item:{},
            detail:{}
        }
    },
    methods:{
        //返回上一页
        back(){
        this.$router.back();
        }  
    },
    filters:{
        add0(val){
            if(!val){
                return 0;
            }
        },
        getDiscount(val){
            if(val==0){
                return 0;
            }
            if(val<0){
               let nval = val.toString().split('');
               nval.splice(1,0,'¥');
               return  nval.join('');;
            }
        }
    },
    mounted(){
        const orderId = this.$route.query.orderId;
        this.item = this.$route.query.item;
        orderDetail(orderId).then(r=>{
            this.detail = r.data;
        })
    }
};
</script>

<style scoped>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
.wrap{font-size: 24rem;margin-bottom: 218rem;}
.main{margin-top: -300rem;}
.el-card{margin: 10rem 0;border-radius: 20rem;}
.el-card__body{padding: 20rem;}
.el-card__body p{line-height: 60rem;}
.f35{font-size: 35rem;}
.finish{margin-right: 50rem;color: #ce6a47;float: right;}
.line{height: 5rem;background-color: #f9f9f9;margin: 10rem 0;}
.center{display: flex;flex-direction: row;align-items: center;}
.map{width: 30rem;height: 30rem;margin-left: 20rem;}
.wrap>p{line-height: 50rem;height: 50rem;}
.detail>p{display: flex;flex-direction: row;
justify-content: space-between;}
svg{font-size: 30rem;margin-top: 10rem;}
.star{color:#cccccc}
.active{color: #fac909;}
</style>